/*
 * @Description  : Vue Router configuration
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-12 11:35:03
 * @LastEditors  : seraph
 * @LastEditTime : 2025-02-20 18:27:36
 */
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/Home.vue'
import TextInterpolation from '@/views/02.模板语法/01.文本插值.vue'
import RawHtml from '@/views/02.模板语法/02.原始HTML.vue'
import InstructionAbbreviation from '@/views/02.模板语法/03.属性绑定/01.指令简写.vue'
import SameNameAbbreviation from '@/views/02.模板语法/03.属性绑定/02.同名简写.vue'
import BooleanAttrBinding from '@/views/02.模板语法/03.属性绑定/03.布尔型属性绑定.vue'
import MultipleAttrBinding from '@/views/02.模板语法/03.属性绑定/04.绑定多个属性.vue'
import OnlySupportExpression from '@/views/02.模板语法/04.使用JS表达式/01.仅支持表达式.vue'
import InstructionDirectives from '@/views/02.模板语法/04.使用JS表达式/02.指令Directives.vue'
import VBindModifiers from '@/views/02.模板语法/04.使用JS表达式/03.01.v-bind表单修饰符.vue'
import EventModifiers from '@/views/02.模板语法/04.使用JS表达式/03.02.v-on事件修饰符.vue'
import KeyPressModifiers from '@/views/02.模板语法/04.使用JS表达式/03.03.v-on按键修饰符.vue'
import MouseModifiers from '@/views/02.模板语法/04.使用JS表达式/03.04.v-on鼠标事件及修饰符.vue'
import MouseDragEvent from '@/views/02.模板语法/04.使用JS表达式/03.05.鼠标拖拽事件.vue'
import FormInputEvent from '@/views/02.模板语法/04.使用JS表达式/03.06.表单输入事件.vue'
import DeclareResponsiveStatementRef from '@/views/03.响应式基础/01.ref.vue'
import DeclareResponsiveStatementReactive from '@/views/03.响应式基础/02.reactive.vue'
import AddtionalRefOfUnpackingDetails from '@/views/03.响应式基础/03.addtional.vue'
import BaseExample from '@/views/04.计算属性/01.baseExample.vue'
import ComputedPropertyCacheVSMethod from '@/views/04.计算属性/02.computedPropertyCacheVSMethod.vue'
import WritableComputedProperty from '@/views/04.计算属性/03.writableComputedProperty.vue'
import GetLastValue from '@/views/04.计算属性/04.getLastValue.vue'
import BindingHTMLClass from '@/views/05.类和样式的绑定/01.绑定html类.vue'
import BindingInlineStyle from '@/views/05.类和样式的绑定/02.绑定内联样式.vue'
import VIf from '@/views/06.条件渲染/01.v-if.vue'
import VElse from '@/views/06.条件渲染/02.v-else.vue'
import VElseIf from '@/views/06.条件渲染/03.v-else-if.vue'
import TemplateVIf from '@/views/06.条件渲染/04.template上的v-if.vue'
import VShow from '@/views/06.条件渲染/05.v-show.vue'
import VIfVsVShow from '@/views/06.条件渲染/06.v-if vs v-show.vue'
import VFor from '@/views/07.列表渲染/01.v-for.vue'
import VForAndObject from '@/views/07.列表渲染/02.v-for与对象.vue'
import VForUseRange from '@/views/07.列表渲染/03.在 v-for 里使用范围值.vue'
import VForOnTemplate from '@/views/07.列表渲染/04.template 上的 v-for.vue'
import VForAndVIf from '@/views/07.列表渲染/05.v-for 与 v-if.vue'
import UseKeyManagementState from '@/views/07.列表渲染/06.通过 key 管理状态.vue'
import ComponentUseVFor from '@/views/07.列表渲染/07.组件上使用 v-for.vue'
import ArrayChangeDetection from '@/views/07.列表渲染/08.数组变化侦测.vue'
import ShowFilteredOrSortedResult from '@/views/07.列表渲染/09.展示过滤或排序后的结果​.vue'

const routes = [
  // 首页
  {
    path: '/',
    redirect: '/index',
  },
  // 首页重定向
  {
    path: '/index',
    name: 'index',
    component: HomeView,
    meta: {
      requiresAuth: true,
      title: '首页',
      customProperty: '首页',
    },
  },
  // 模板语法
  {
    path: '/templateSyntax',
    name: 'templateSyntax',
    meta: {
      requiresAuth: true,
      title: '模板语法',
      customProperty: '模板语法',
      isParent: true,
    },
    // 子菜单
    children: [
      // 文本插值
      {
        path: '/templateSyntax/textInterpolation',
        name: 'textInterpolation',
        component: TextInterpolation,
        meta: {
          requiresAuth: true,
          title: '文本插值',
          customProperty: '文本插值',
        },
      },
      // 原始 HTML
      {
        path: '/templateSyntax/rawHtml',
        name: 'rawHtml',
        component: RawHtml,
        meta: {
          requiresAuth: true,
          title: '原始 HTML',
          customProperty: '原始 HTML',
        },
      },
      // 属性绑定
      {
        path: '/templateSyntax/attrBinding',
        name: 'attrBinding',
        meta: {
          requiresAuth: true,
          title: '属性绑定',
          customProperty: '属性绑定',
          isParent: true,
        },
        children: [
          // 指令简写
          {
            path: '/templateSyntax/attrBinding/instructionAbbreviation',
            name: 'instructionAbbreviation',
            component: InstructionAbbreviation,
            meta: {
              requiresAuth: true,
              title: '指令简写',
              customProperty: '指令简写',
            },
          },
          // 同名简写
          {
            path: '/templateSyntax/attrBinding/sameNameAbbreviation',
            name: 'sameNameAbbreviation',
            component: SameNameAbbreviation,
            meta: {
              requiresAuth: true,
              title: '同名简写',
              customProperty: '同名简写',
            },
          },
          // 绑定布尔型属性
          {
            path: '/templateSyntax/attrBinding/bBooleanAttrBinding',
            name: 'bBooleanAttrBinding',
            component: BooleanAttrBinding,
            meta: {
              requiresAuth: true,
              title: '绑定布尔型属性',
              customProperty: '绑定布尔型属性',
            },
          },
          // 绑定多个属性
          {
            path: '/templateSyntax/attrBinding/multipleAttrBinding',
            name: 'multipleAttrBinding',
            component: MultipleAttrBinding,
            meta: {
              requiresAuth: true,
              title: '绑定多个属性',
              customProperty: '绑定多个属性',
            },
          },
        ],
      },
      // 使用JS表达式
      {
        path: '/templateSyntax/useJsExpression',
        name: 'useJsExpression',
        meta: {
          requiresAuth: true,
          title: '使用JS表达式',
          customProperty: '使用JS表达式',
          isParent: true,
        },
        children: [
          // 使用JS表达式
          {
            path: '/templateSyntax/useJsExpression/onlySupportExpression',
            name: 'onlySupportExpression',
            component: OnlySupportExpression,
            meta: {
              requiresAuth: true,
              title: '使用JS表达式',
              customProperty: '使用JS表达式',
            },
          },
          // 指令Directives
          {
            path: '/templateSyntax/useJsExpression/instructionDirectives',
            name: 'instructionDirectives',
            component: InstructionDirectives,
            meta: {
              requiresAuth: true,
              title: '指令Directives',
              customProperty: '指令Directives',
            },
          },
          // 修饰符
          {
            path: '/templateSyntax/useJsExpression/modifiers',
            name: 'modifiers',
            meta: {
              requiresAuth: true,
              title: '修饰符',
              customProperty: '修饰符',
              isParent: true,
            },
            children: [
              // v-bind表单修饰符
              {
                path: '/templateSyntax/useJsExpression/modifiers/vBindModifiers',
                name: 'vBindModifiers',
                component: VBindModifiers,
                meta: {
                  requiresAuth: true,
                  title: 'v-bind表单修饰符',
                  customProperty: 'v-bind表单修饰符',
                },
              },
              // v-on修饰符
              {
                path: '/templateSyntax/useJsExpression/modifiers/vOnModifiers',
                name: 'vOnModifiers',
                meta: {
                  requiresAuth: true,
                  title: 'v-on修饰符',
                  customProperty: 'v-on修饰符',
                  isParent: true,
                },
                children: [
                  // 事件修饰符
                  {
                    path: '/templateSyntax/useJsExpression/modifiers/eventModifiers',
                    name: 'eventModifiers',
                    component: EventModifiers,
                    meta: {
                      requiresAuth: true,
                      title: '事件修饰符',
                      customProperty: '事件修饰符',
                    },
                  },
                  // 按键修饰符
                  {
                    path: '/templateSyntax/useJsExpression/modifiers/keyPressModifiers',
                    name: 'keyPressModifiers',
                    component: KeyPressModifiers,
                    meta: {
                      requiresAuth: true,
                      title: '按键修饰符',
                      customProperty: '按键修饰符',
                    },
                  },
                  // 鼠标事件及修饰符
                  {
                    path: '/templateSyntax/useJsExpression/modifiers/mouseModifiers',
                    name: 'mouseModifiers',
                    component: MouseModifiers,
                    meta: {
                      requiresAuth: true,
                      title: '鼠标事件及修饰符',
                      customProperty: '鼠标事件及修饰符',
                    },
                  },
                  // 鼠标拖拽事件
                  {
                    path: '/templateSyntax/useJsExpression/modifiers/mouseDragEvent',
                    name: 'mouseDragEvent',
                    component: MouseDragEvent,
                    meta: {
                      requiresAuth: true,
                      title: '鼠标拖拽事件',
                      customProperty: '鼠标拖拽事件',
                    },
                  },
                  // 表单输入事件
                  {
                    path: '/templateSyntax/useJsExpression/modifiers/formInputEvent',
                    name: 'formInputEvent',
                    component: FormInputEvent,
                    meta: {
                      requiresAuth: true,
                      title: '表单输入事件',
                      customProperty: '表单输入事件',
                    },
                  },
                ],
              },
              //
            ],
          },
        ],
      },
    ],
  },
  // 响应式基础
  {
    path: '/responsiveBase',
    name: 'responsiveBase',
    meta: {
      requiresAuth: true,
      title: '响应式基础',
      customProperty: '响应式基础',
      isParent: true,
    },
    children: [
      // 声明响应状态
      {
        path: '/responsiveBase/declareResponsiveStatement',
        name: 'declareResponsiveStatement',
        meta: {
          requiresAuth: true,
          title: '声明响应状态',
          customProperty: '声明响应状态',
          isParent: true,
        },
        children: [
          {
            path: '/responsiveBase/declareResponsiveStatement/ref',
            name: 'declareResponsiveStatementRef',
            component: DeclareResponsiveStatementRef,
            meta: {
              requiresAuth: true,
              title: 'ref 响应式数据',
              customProperty: 'ref',
            },
          },
          {
            path: '/responsiveBase/declareResponsiveStatement/reactive',
            name: 'declareResponsiveStatementReactive',
            component: DeclareResponsiveStatementReactive,
            meta: {
              requiresAuth: true,
              title: 'reactive 响应式数据',
              customProperty: 'reactive',
            },
          },
          {
            path: '/responsiveBase/declareResponsiveStatement/addtional',
            name: 'addtionalRefOfUnpackingDetails',
            component: AddtionalRefOfUnpackingDetails,
            meta: {
              requiresAuth: true,
              title: '额外的 ref 解包细节',
              customProperty: 'addtional',
            },
          },
        ],
      },
    ],
  },
  // 计算属性
  {
    path: '/computedProperties',
    name: 'computedProperties',
    meta: {
      requiresAuth: true,
      title: '计算属性',
      customProperty: '计算属性',
      isParent: true,
    },
    children: [
      {
        path: '/computedProperties/baseExample',
        name: 'baseExample',
        component: BaseExample,
        meta: {
          requiresAuth: true,
          title: '基本示例',
          customProperty: '基本示例',
        },
      },
      {
        path: '/computedProperties/computedPropertyCacheVSMethod',
        name: 'computedPropertyCacheVSMethod',
        component: ComputedPropertyCacheVSMethod,
        meta: {
          requiresAuth: true,
          title: '计算属性缓存 vs 方法',
          customProperty: '计算属性缓存 vs 方法',
        },
      },
      {
        path: '/computedProperties/writableComputedProperty',
        name: 'writableComputedProperty',
        component: WritableComputedProperty,
        meta: {
          requiresAuth: true,
          title: '可写计算属性',
          customProperty: '可写计算属性',
        },
      },
      {
        path: '/computedProperties/getLastValue',
        name: 'getLastValue',
        component: GetLastValue,
        meta: {
          requiresAuth: true,
          title: '获上一个值',
          customProperty: '获上一个值',
        },
      },
    ],
  },

  {
    path: '/classAndStyleBinding',
    name: 'classAndStyleBinding',
    meta: {
      requiresAuth: true,
      title: '类和样式的绑定',
      customProperty: '类和样式的绑定',
      isParent: true,
    },
    children: [
      {
        path: '/classAndStyleBinding/bindingHTMLClass',
        name: 'bindingHTMLClass',
        component: BindingHTMLClass,
        meta: {
          requiresAuth: true,
          title: '绑定 HTML Class',
          customProperty: '绑定 HTML Class',
        },
      },
      {
        path: '/classAndStyleBinding/bindingInlineStyle',
        name: 'bindingInlineStyle',
        component: BindingInlineStyle,
        meta: {
          requiresAuth: true,
          title: '绑定内联样式',
          customProperty: '绑定内联样式',
        },
      },
    ],
  },
  {
    path: '/conditionalRendering',
    name: 'conditionalRendering',
    meta: {
      requiresAuth: true,
      title: '条件渲染',
      customProperty: '条件渲染',
      isParent: true,
    },
    children: [
      {
        path: '/conditionalRendering/vIf',
        name: 'vIf',
        component: VIf,
        meta: {
          requiresAuth: true,
          title: 'v-if',
          customProperty: 'v-if',
        },
      },
      {
        path: '/conditionalRendering/vElse',
        name: 'vElse',
        component: VElse,
        meta: {
          requiresAuth: true,
          title: 'v-else',
          customProperty: 'v-else',
        },
      },
      {
        path: '/conditionalRendering/vElseIf',
        name: 'vElseIf',
        component: VElseIf,
        meta: {
          requiresAuth: true,
          title: 'v-else-if',
          customProperty: 'v-else-if',
        },
      },
      {
        path: '/conditionalRendering/templateVIf',
        name: 'templateVIf',
        component: TemplateVIf,
        meta: {
          requiresAuth: true,
          title: 'template上的v-if',
          customProperty: 'template上的v-if',
        },
      },
      {
        path: '/conditionalRendering/vShow',
        name: 'vShow',
        component: VShow,
        meta: {
          requiresAuth: true,
          title: 'v-show',
          customProperty: 'v-show',
        },
      },
      {
        path: '/conditionalRendering/vIfVsVShow',
        name: 'vIfVsVShow',
        component: VIfVsVShow,
        meta: {
          requiresAuth: true,
          title: 'v-if vs v-show',
          customProperty: 'v-if vs v-show',
        },
      },
    ],
  },
  {
    path: '/listRendering',
    name: 'listRendering',
    meta: {
      requiresAuth: true,
      title: '列表渲染',
      customProperty: '列表渲染',
      isParent: true,
    },
    children: [
      {
        path: '/listRendering/vFor',
        name: 'vFor',
        component: VFor,
        meta: {
          requiresAuth: true,
          title: 'v-for',
          customProperty: 'v-for',
        },
      },
      {
        path: '/listRendering/vForAndObject',
        name: 'vForAndObject',
        component: VForAndObject,
        meta: {
          requiresAuth: true,
          title: 'v-for 和对象',
          customProperty: 'v-for 和对象',
        },
      },
      {
        path: '/listRendering/vForUseRange',
        name: 'vForUseRange',
        component: VForUseRange,
        meta: {
          requiresAuth: true,
          title: '在 v-for 里使用范围值',
          customProperty: '在 v-for 里使用范围值',
        },
      },
      {
        path: '/listRendering/vForOnTemplate',
        name: 'vForOnTemplate',
        component: VForOnTemplate,
        meta: {
          requiresAuth: true,
          title: 'template 上的 v-for',
          customProperty: 'template 上的 v-for',
        },
      },
      {
        path: '/listRendering/vForAndVIf',
        name: 'vForAndVIf',
        component: VForAndVIf,
        meta: {
          requiresAuth: true,
          title: 'v-for 和 v-if',
          customProperty: 'v-for 和 v-if',
        },
      },
      {
        path: '/listRendering/useKeyManagementState',
        name: 'useKeyManagementState',
        component: UseKeyManagementState,
        meta: {
          requiresAuth: true,
          title: '通过 key 管理状态',
          customProperty: '通过 key 管理状态',
        },
      },
      {
        path: '/listRendering/componentUseVFor',
        name: 'componentUseVFor',
        component: ComponentUseVFor,
        meta: {
          requiresAuth: true,
          title: '组件上使用 v-for',
          customProperty: '组件上使用 v-for',
        },
      },
      {
        path: '/listRendering/arrayChangeDetection',
        name: 'arrayChangeDetection',
        component: ArrayChangeDetection,
        meta: {
          requiresAuth: true,
          title: '数组变化侦测',
          customProperty: '数组变化侦测',
        },
      },
      {
        path: '/listRendering/showFilteredOrSortedResult',
        name: 'showFilteredOrSortedResult',
        component: ShowFilteredOrSortedResult,
        meta: {
          requiresAuth: true,
          title: '展示过滤或排序后的结果',
          customProperty: '展示过滤或排序后的结果',
        },
      },
    ],
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // if (to.meta.requiresAuth && !isAuthenticated()) {
  //   next({ name: 'login' }) // 如果需要认证且用户未认证，则重定向到登录页面
  // } else {
  //   next() // 继续导航
  // }
  next() // 继续导航
})

export default router
